<template>
  <base-table-layout
    title="烘烤管理"
    :total="total"
    :current-page="searchForm.pageNum"
    :page-size="searchForm.pageSize"
    @update:currentPage="val => searchForm.pageNum = val"
    @update:pageSize="val => searchForm.pageSize = val"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  >
    <!-- 搜索区域 -->
    <template #search>
      <el-form :inline="true" :model="searchForm" class="search-form">
        <div class="search-form-row">
          <el-form-item label="农户姓名">
            <el-input
              v-model="searchForm.growerName"
              placeholder="农户姓名"
              style="width: 200px"
              @keyup.enter.native="handleSearch"
            />
          </el-form-item>
          <el-form-item label="所属部门">
            <dept-tree-select
              v-model="searchForm.deptId"
              placeholder="选择部门"
              width="250px"
              @change="handleSearch"
            />
          </el-form-item>
        </div>
        <div class="search-form-row">
          <el-form-item label="烘烤时间">
            <el-date-picker
              v-model="dateRange"
              type="daterange"
              range-separator="~"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              style="width: 350px"
              value-format="yyyy-MM-dd"
              @change="handleDateChange"
            />
          </el-form-item>
          <el-form-item>
            <div class="button-group">
              <el-button type="primary" icon="el-icon-search" @click="handleSearch" class="form-button">搜索</el-button>
              <el-button type="info" icon="el-icon-refresh" @click="resetSearch" class="form-button">重置</el-button>
            </div>
          </el-form-item>
        </div>
      </el-form>
    </template>

    <!-- 操作区域 -->
    <template #operation>
      <div class="operation-buttons">
        <el-button type="primary" icon="el-icon-download" @click="$message.info('导出功能开发中')" class="operation-button">导出Excel</el-button>
      </div>
    </template>

    <!-- 表格区域 -->
    <template #table>
      <el-table
        v-loading="loading"
        :data="bakingList"
        border
        style="width: 100%"
      >
        <el-table-column prop="recordId" label="记录ID" width="80" />
        <el-table-column prop="growerName" label="农户姓名" min-width="100" />
        <el-table-column prop="phone" label="联系电话" min-width="120" />
        <el-table-column label="所属区域" min-width="200">
          <template slot-scope="scope">
            {{ scope.row.tobaccoStationName }}/{{ scope.row.townName }}/{{ scope.row.villageGroupName }}
          </template>
        </el-table-column>
        <el-table-column prop="clipCount" label="夹数" width="80" align="right" />
        <el-table-column prop="poleCount" label="杆数" width="80" align="right" />
        <el-table-column prop="bakingTime" label="烘烤时间" width="160" />
        <el-table-column prop="remark" label="备注" min-width="150" show-overflow-tooltip />
      </el-table>
    </template>
  </base-table-layout>
</template>

<script>
import _ from 'lodash'
import BaseTableLayout from '@/components/BaseTableLayout.vue'
import DeptTreeSelect from '@/components/DeptTreeSelect.vue'

export default {
  name: 'BakingManager',
  components: {
    BaseTableLayout,
    DeptTreeSelect
  },
  data() {
    return {
      loading: false,
      searchForm: {
        pageNum: 1,
        pageSize: 10,
        growerName: '',
        deptId: undefined,
        startTime: undefined,
        endTime: undefined
      },
      dateRange: [],
      bakingList: [],
      total: 0
    }
  },
  created() {
    // 加载示例数据进行展示
    this.loadMockData()
  },
  methods: {
    loadMockData() {
      this.bakingList = [
        {
          recordId: 201,
          growerName: '赵四海',
          phone: '13800138001',
          tobaccoStationName: '站点X',
          townName: '镇Y',
          villageGroupName: '村组Z',
          clipCount: 150,
          poleCount: 30,
          bakingTime: '2025-04-25 08:30:00',
          remark: '第一批烘烤'
        },
        {
          recordId: 202,
          growerName: '钱小芳',
          phone: '13900139001',
          tobaccoStationName: '站点X',
          townName: '镇Y',
          villageGroupName: '村组W',
          clipCount: 200,
          poleCount: 40,
          bakingTime: '2025-04-26 09:45:00',
          remark: '第二批烘烤'
        }
      ]
      this.total = 2
    },

    // 获取烘烤记录列表 (实际开发时会调用接口)
    async fetchBakingList() {
      try {
        this.loading = true
        // 实际开发时会调用接口获取数据
        this.$message.info('接口开发中')
        
        // 模拟接口调用延迟
        setTimeout(() => {
          this.loading = false
        }, 500)
      } catch (error) {
        console.error('获取烘烤记录失败:', error)
        this.$message.error('获取烘烤记录失败')
        this.loading = false
      }
    },

    handleSearch: _.debounce(function() {
      this.searchForm.pageNum = 1
      this.fetchBakingList()
    }, 300),

    resetSearch() {
      this.searchForm = {
        pageNum: 1,
        pageSize: 10,
        growerName: '',
        deptId: undefined,
        startTime: undefined,
        endTime: undefined
      }
      this.dateRange = []
      this.handleSearch()
    },

    handleSizeChange(val) {
      this.searchForm.pageSize = val
      this.fetchBakingList()
    },

    handleCurrentChange(val) {
      this.searchForm.pageNum = val
      this.fetchBakingList()
    },

    handleDateChange(val) {
      if (val) {
        this.searchForm.startTime = val[0]
        this.searchForm.endTime = val[1]
      } else {
        this.searchForm.startTime = undefined
        this.searchForm.endTime = undefined
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.search-form {
  .el-form-item {
    margin-bottom: 10px;
    margin-right: 10px;
  }
  
  .search-form-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    margin-bottom: 5px;
  }
  
  .form-button {
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .button-group {
    display: flex;
    gap: 10px;
  }
}

.operation-buttons {
  display: flex;
  gap: 10px;
}

.operation-button {
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
